<template>
    <div>
        <div class="qa-body">
            <div class="qa-layout" style="padding: 10px 15px">
                <div class="chat-list">
                    <ul>
                      <li class="left">
                        <img :src="teacherImage">
                        <div class="message">
                          <div class="message-info">
                            <font>{{ options.teacherName }}</font>
                          </div>
                          <div class="message-content">
                            <span>{{ this.options.content }}</span>
                          </div>
                        </div>
                      </li>
                      <li class="right" style="flex-direction: row-reverse;">
                        <img :src="userImage">
                        <div class="message">
                          <div class="message-content">
                            <span>{{ this.btnText }}</span>
                          </div>
                        </div>
                      </li>
                      <li v-for="item, index in chatList" :class="item.position" :style="item.style">
                        <img :src="item.image">
                        <div class="message">
                          <div class="message-info" v-if="item.showName">
                            <font>{{ options.teacherName }}</font>
                          </div>
                          <div class="message-content">
                            <span>{{ item.message }}</span>
                            <div class="qa-options" v-if="index == chatList.length - 1">
                              <button v-for="v, i in item.options" @click="clickOption(v)">{{ v }}</button>
                            </div>
                          </div>
                        </div>
                      </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import tpl from "@/mixins/tpl";
import teacherImage from "@/assets/image/teacher.jpg"
import userImage from "@/assets/image/qa-user.jpeg"

export default {
  mixins: [tpl],
  data() {
    return {
      options: {},
      btnText: "",
      chatList: [],
      step: 0,
      teacherImage: teacherImage,
      userImage: userImage,
      now: ''
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      const { text } = this.$route.query;
      this.btnText = text;
      // this.getCus();
      const tplData = this.$store.getters['open/tplData']
      tplData.views.map(v => {
        if (v.type == 'btnMessage') {
          this.options = v.options
        }
      })

      setTimeout(() => {
        this.teacherAnswer();
      }, 600)
    },
    teacherAnswer() {
      this.chatList.push({
        position: 'left',
        image: this.teacherImage,
        message: this.options.formList[this.step].question,
        options: this.options.formList[this.step].options,
        style: {},
        showName: true
      })
    },
    clickOption(value) {
      this.step += 1;

      if (this.step == this.options.formList.length) {
        this.skipAdMp(this.options);
        return;
      }

      this.chatList.push({
        position: 'right',
        image: this.userImage,
        message: value,
        options: [],
        style: {
          flexDirection: 'row-reverse'
        },
        showName: false
      })

      setTimeout(() => {
        this.teacherAnswer();
      }, 600)
    }
  },
};
</script>
<style lang="scss" scoped>
.chat-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 15px;
    box-sizing: border-box;
    height: auto;
    background-color: #f5f5f5;
}
.chat-list ul {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
}

.chat-list ul li {
    list-style: none;
    display: flex;
    flex-direction: row;
    margin-bottom: 15px;
    font-size: 14px;
    animation: myfirst .8s;
}
.chat-list ul li > img {
    width: 44px;
    height: 44px;
    border-radius: 3px;
}
.chat-list ul li .message {
    flex: 1;
    display: flex;
    flex-direction: column;
    line-height: 20px;
}
.chat-list ul li .message > .message-info {
    display: flex;
    line-height: 20px;
    margin: 0 10px 5px;
    color: #999;
}
.chat-list ul li .message > .message-info > font:first-child {
    margin-right: 15px;
    font-weight: 600;
    font-size: 15px;
    color: #333;
}
.chat-list ul li .message .message-content {
    float: left;
    font-size: 15px;
    margin: 0 10px;
    line-height: 24px;
    padding: 10px;
    border-radius: 4px;
    max-width: calc(100% - 20px);
    position: relative;
    word-break: break-all;
    background: #fff;
}
.chat-list ul li .message .message-content .qa-options {
  margin: 5px 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-around;
}
.chat-list ul li .message .message-content .qa-options button {
  width: 45%;
  padding: 5px 10px;
  border: none;
  color: #fff;
  background-color: #07c160;
  border-radius: 10px;
  margin-bottom: 10px;
}
.chat-list ul .left .message span:before {
    position: absolute;
    top: 22px;
    transform: translate(-5px, -50%);
    left: 0;
    content: "";
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid #FFFFFF;
    width: 0;
    height: 0;
}

.chat-list ul li .right {
    flex-direction: row-reverse;
}
.chat-list ul .right .message {
    flex: 1;
    display: flex;
    flex-direction: row-reverse;
}
.chat-list ul .right .message .message-content {
    background-color: #ec6969;
}
.chat-list ul .right .message .message-content span:after {
    position: absolute;
    top: 22px;
    transform: translate(5px, -50%);
    right: 0;
    content: "";
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #ec6969;
    width: 0;
    height: 0;
}

@keyframes myfirst{
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0px);
        opacity: 1;
    }
}
</style>
